import React, { Component } from 'react';
import {
  Text,
  View,
  ListView,
  StyleSheet,
  Image,
  TouchableOpacity,
  Platform,
} from 'react-native';

import ChangeCarsDiscount from './ChangeCarsDiscount';
import ModalExt from '../Public/ModalExt';
import PxToDp from '../../utils/PxToDp';
import NavCon from '../Public/NavCon';

class CarsDiscount extends Component {
  constructor(props) {
    super(props);
    const storeInfo = this.props.storeInfo ? this.props.storeInfo : {};
    const rv = storeInfo.rv ? storeInfo.rv : {};
    const discounts = rv.discounts ? rv.discounts : [];
    this.state = {
      discounts,
      discount: {},
      discountVisible: false,
      ds: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }),
    };
  }

  _setDiscountVisible(discount, visible) {
    this.setState({ discount });
    console.log('state-discount', discount);
    if (this.state.discount.car_id) {
      this.setState({ discountVisible: visible });
    }
  }

  _goBack() {
    this.props.navigator.pop();
  }
  render() {
    const { dispatch } = this.props;
    return (
      <View style={[styles.flex, styles.bgColor, styles.titleTop]}>
        <NavCon backName="" currentTitle="车系优惠" bgColor="#fff" onPress={() => this._goBack()} />
        <View style={[styles.wrapper, styles.listWrapper]}>
          <ListView
            dataSource={this.state.ds.cloneWithRows(this.props.storeInfo.rv.discounts)}
            renderRow={discount =>
              <TouchableOpacity
                activeOpacity={0.6}
                style={[styles.row, styles.list]}
                onPress={() => {
                  this._setDiscountVisible(discount, true);
                }
                }
              >
                <View>
                  <Text style={[styles.title]}>{discount.carname}</Text>
                  <View style={[styles.row, { width: '100%' }]}>
                    {
                      discount.discount < 100 ?
                        <Text style={[styles.name]}>有优惠{discount.discount}折 </Text> :
                        <Text style={[styles.name]}>无优惠</Text>
                    }
                    {
                      discount.stock ?
                        <Text style={[styles.name]}>有现车</Text> :
                        <Text style={[styles.name]}>无现车</Text>
                    }
                  </View>
                </View>
                <View style={[styles.row, styles.end]}>
                  <Image style={[styles.next]} source={require('../../img/next.png')} />
                </View>
              </TouchableOpacity>
            }
          />

        </View>
        <ModalExt
          onRequestClose={() => this._setDiscountVisible(this.state.discount, false)}
          animationType={'slide'}
          transparent
          visible={this.state.discountVisible}
        >
          <ChangeCarsDiscount
            discount={this.state.discount}
            dispatch={dispatch}
            onPress={() => this._setDiscountVisible(this.state.discount, false)}
          />
        </ModalExt>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  bgColor: {
    backgroundColor: '#f7f8fa',
  },
  row: {
    flexDirection: 'row',
  },
  end: {
    justifyContent: 'flex-end',
  },
  title: {
    marginTop: PxToDp(2),
    color: '#333',
    fontSize: PxToDp(14),
  },
  wrapper: {
    width: '100%',
    marginTop: PxToDp(24),
    backgroundColor: '#fff',
  },
  list: {
    justifyContent: 'space-between',
    alignItems: 'center',
    height: PxToDp(44),
    paddingLeft: PxToDp(16),
    paddingRight: PxToDp(20),
    borderColor: '#f3f3f3',
    borderBottomWidth: PxToDp(1),
  },
  name: {
    color: '#999',
    fontSize: PxToDp(14),
  },
  next: {
  },
  titleTop: {
    marginTop: Platform.OS === 'ios' ? PxToDp(20) : 0,
  },
});
export default CarsDiscount;
